<template>
  <div id="box1">
    <el-upload class="upload-demo" ref="upload" action="http://localhost:3000/upload" :on-preview="handlePreview"
      :on-remove="handleRemove" :on-success="uploadSuccess" :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选择图片</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">提交</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="getList">获取列表</el-button>

      <el-dialog title="图片列表" :visible.sync="dialogTableVisible">
        <el-table 
          :data="gridData.slice((paginations.currentPage - 1) * paginations.PageSize, paginations.currentPage * paginations.PageSize)"
          >
          <el-table-column property="name" label="图片名称" width="150"></el-table-column>
          <el-table-column property="size" label="大小" width="200"></el-table-column>
          <el-table-column property="type" label="类型"></el-table-column>
          <el-table-column property="src" label="缩略图">
            <!-- <img src={{this.gridData[0].src}}> -->
            <template #default="scoped">
              <img :src="previewPhoto(scoped.row.type, scoped.row.src)" width="70px" height="50px" />
            </template>
          </el-table-column>
          <el-table-column property="" label="删除">
            <template slot-scope="scope">
              <el-button style="margin-left: -10px;" size="small" type="danger"
                @click="delList(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="paginations.currentPage" :page-sizes="paginations.pageSizes" :page-size="paginations.PageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="gridData.length">
          </el-pagination>
        </div>
      </el-dialog>
    </el-upload>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      dataCount: null,
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      //分页
      paginations: {
        // 默认显示第几页
        currentPage: 1,
        // 个数选择器（可修改）
        pageSizes: [1, 2, 3, 4],
        // 默认每页显示的条数（可修改）
        PageSize: 4,
      },

      formLabelWidth: '120px'
    };
  },
  methods: {
    previewPhoto(type, chunk) {
      console.log(type)
      console.log(chunk)
      let imgURL = "data" + ":" + type + ";" + "base64," + chunk;
      console.log(imgURL)
      return imgURL;
    },
    submitUpload() {
      // console.log(localStorage.getItem('token'))
      if (localStorage.getItem('token')) {
        this.$refs.upload.submit()
        this.$message({
          type: "success",
          message: "提交成功"
        })
      }

    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    uploadSuccess(response, file, fileList) {
      console.log(response)
      // console.log(file)
      // console.log(fileList)
    },
    getList() {
      this.dialogTableVisible = true
      axios.get("http://localhost:3000/getlist").then(res => {
        let result = res.data;
        this.gridData = result
      })
    },
    delList(index, row) {
      axios.post("http://localhost:3000/dellist", { name: row.name }).then(res => {
        if (res.data.code == 200) {
          this.gridData.splice(index, 1);
        }
      })
    },
    // //分页/
      // //分页/
      // 每页显示多少条
      handleSizeChange(val) {
        // 改变每页显示的条数 
        this.paginations.PageSize=val
        // 注意：在改变每页显示的条数时，要将页码显示到第一页
        this.paginations.currentPage=1
        console.log(`每页 ${val} 条`);
      },
      // 现在显示当前页的第几页
      handleCurrentChange(val) {
        // 改变默认的页数
        this.paginations.currentPage=val
        console.log(`当前页: ${val}`);
      },
      // handleOpen(key, keyPath) {
      //   console.log(key, keyPath);
      // },
      // handleClose(key, keyPath) {
      //   console.log(key, keyPath);
      // }
  }
}
</script>
<style>
#box1 {
  margin: 0 auto;
  height: 200px;
  width: 400px;
  border: 3px dashed rgba(156, 158, 161, 50%);
}
</style>